<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/demo.css">
</head>
<body>
    <div id="app">
        <fieldset>
            <legend>
                Create New Person
            </legend>
            <div class="form-group">
                <label>Name:</label>
                <input type="text" v-model="newPerson.name"/>
            </div>
            <div class="form-group">
                <label>Age:</label>
                <input type="text" v-model="newPerson.age"/>
            </div>
            <div class="form-group">
                <label>Sex:</label>
                <select v-model="newPerson.sex">
                    <option value="male">male</option>
                    <option value="female">female</option>
                </select>
            </div>
            <div class="form-group">
                <button @click="createPerson">createPerson</button>
            </div>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Age</td>
                    <td>Sex</td>
                    <td>Delete</td>
                </tr>
            </thead>
            <tbody>
            <tr v-for="(person, index) in people">
                    <td>{{ person.name }}</td>
                    <td>{{ person.age }}</td>
                    <td>{{ person.sex }}</td>
                    <td :class="'text-center'">
                        <button @click="deletePerson(index)">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="../js/vue.js"></script>
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                newPerson: {
                    name: '',
                    age: 0,
                    sex: 'male'
                },
                people: [{
                    name: 'andy',
                    age: 23,
                    sex: 'female'
                },{
                    name: 'jeck',
                    age: 25,
                    sex: 'male'
                },{
                    name: 'jeson',
                    age: 26,
                    sex: 'male'
                }]
            },
            methods: {
                createPerson: function () {
                    this.people.push(this.newPerson);
                    this.newPerson = {name: '',age: 0, sex: 'male'};
                },
                deletePerson:function (index) {
                    this.people.splice(index, 1);
                }
            }
        })
    </script>
</body>
</html>